<!--  -->
<template>
  <div class>
    <Head></Head>
     <titlemeta></titlemeta>
    <div class="navContent">
     
           <VueEditor
          style="width: 100%"
          v-model="dataInfo.aboutUs"
          :editorToolbar="customToolbar"
          :disabled="true"
        ></VueEditor>
    </div>

    <Foot></Foot>
   <lefINvitation class="leftNvit" ref="lefINvitation" @buttop="buttop"></lefINvitation>
    <nightNvitation class="nightNvit"></nightNvitation>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { mapGetters } from "vuex";
import Head from "../../components/Head";
import Foot from "../../components/Foot";
import lefINvitation from "../../components/lefINvitation";
import nightNvitation from "../../components/nightNvitation";
import titlemeta from '../../components/titlemeta'
import { VueEditor } from "vue2-editor";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Head,
    Foot,
    lefINvitation,
    nightNvitation,
    titlemeta,
    VueEditor
  },
  data() {
    //这里存放数据
    return {
           customToolbar: [
        [{ font: [] }],
        [{ header: [false, 1, 2, 3, 4, 5, 6] }],
        [{ size: ["small", false, "large", "huge"] }],
        ["bold", "italic", "underline", "strike"],
        [
          { align: "" },
          { align: "center" },
          { align: "right" },
          { align: "justify" }
        ],
        [{ header: 1 }, { header: 2 }],
        ["blockquote", "code-block"],
        [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
        [{ script: "sub" }, { script: "super" }],
        [{ indent: "-1" }, { indent: "+1" }],
        [{ color: [] }, { background: [] }],
        ["link", "image", "video", "formula"],
        [{ direction: "rtl" }],
        ["clean"]
      ]
    };
  },
  //监听属性 类似于data概念
  computed: {
     ...mapGetters(["dataInfo"])
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
        // 回到顶部
    buttop(val) {
      if (val) {
        document.documentElement.scrollTop = 0;
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
@import url("../../assets/nvit.scss");
//@import url(); 引入公共css类
.navContent {
  width: 67%;
  border: 1px solid rgba(54, 54, 54, 0.137);
  padding: 0.2rem 0;
  margin: 0.4rem auto;
//   text-align: center;
}
.navContent_env {
  font-size: 0.3rem;
  color: #333;
  text-align: center;
}
.navContent_nav {
  font-size: 0.16rem;
  margin: 0.2rem auto 0.4rem;
  text-align: center;
}
.navContent_content{
    margin: 0 auto 1.5rem;
    text-indent: 8mm;
    padding: 0.4rem;
    font-size: 0.14rem;
    line-height: 0.3rem;
}
/deep/.quillWrapper .ql-snow.ql-toolbar {
  display: none;
}
/deep/.ql-container.ql-snow {
  border: 0;
  /* border-top:1px solid #ccc; */
}
@media screen and (max-width: 750px) {
  .navContent{
    width: 85%;
  }
}
</style>